<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150px" height="150px"></canvas>
</body>
<script type="text/javascript">
    function draw() {
        const canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
            // 获取2d的上下文
            const ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect(10, 10, 55, 50);
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect(30, 30, 55, 50);
        }
    }
</script>
</html>